<template>
	<view class="page">
		<Update v-if="updatePopup" :versionInfo="versionInfo"></Update>
		<Merchants v-if="merchantsPopup"></Merchants>
		<ContactUs v-if="contactUsPopup" v-on:gotourl='contactUs'></ContactUs>
		<view class="status-bar"></view>
		<view class="top">
			
			<!-- <open-data type="userAvatarUrl"></open-data>    
			<open-data type="userNickName" lang="zh_CN"></open-data>  -->
			<image src="/static/img/login-top.png" class="login-top" mode="aspectFill"></image>
			<image :src="getmemberInfo.avatarUrl" class="user" v-if="htoken==1"></image>
			<image src="/static/img/not-login.png" class="user" v-else></image>
			<text class="wechat-name" v-if="token==''" @click="toLogin">立即登录	</text>

			<!-- 用户头像 -->
			<text class="wechat-name" v-if="token==1">{{getmemberInfo.nickName}}</text>
			<view class="share-wrap">
				<image src="/static/img/share.png" class="share"></image>
				<text class="share-content" @click="shareApp">分享APP</text>
			</view>
		</view>
		<view class="info">
			<!-- <view class="info-item" v-for="(item,index) in info" :key="index" @click="toPay(index)">
				<image :src="item.icon" class="pay"></image>
				<text class="pay-content">{{item.content}}</text>
				<view class="number">
					<text>{{item.number}}</text>
				</view>
			</view> -->
			<view class="info-item" @click="toPay(0)">
				<image src="/static/img/pay.png" class="pay"></image>
				<text class="pay-content">待付款</text>
				<view class="number" v-if="count_unpay">
					<text>{{orderCount.count_unpay}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(1)">
				<image src="/static/img/send.png" class="pay"></image>
				<text class="pay-content">待发货</text>
				<view class="number" v-if="count_unsend">
					<text>{{orderCount.count_unsend}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(2)">
				<image src="/static/img/transport.png" class="pay"></image>
				<text class="pay-content">运输中</text>
				<view class="number" v-if="count_sending">
					<text>{{orderCount.count_sending}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(3)">
				<image src="/static/img/history.png" class="pay"></image>
				<text class="pay-content">历史</text>
				<!-- <view class="number">
					<text>{{orderCount.count_unpay}}</text>
				</view> -->
			</view>
			
		</view>
		<image :src="firstImgurl" class="summer"></image>
		<view class="bottom">
			<view class="info-wrap" @click="toConsume">
				<text>消费记录</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toHistory">
				<text>浏览记录</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toAccount">
				<text>账号设置</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="contactUs">
				<text>联系客服</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toAgreement">
				<text>平台协议</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toMerchants">
				<text>商家入驻</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			
		</view>
		<image :src="twoImgurl" class="luck"></image>
		<!-- <image :src="twoImgurl" class="luck"></image> -->
		<view class="logout" v-if="showLogout">
			<text @click="loginExit">退出登录</text>
		</view>

		<text class="network">有派网络@技术支持</text>
		<Authority v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='getCode'></Authority>
	</view>
</template>

<script>
	import {
		request
	} from '../../request/index.js';
	import Update from '@/components/Update';
	import Merchants from '@/pages/my/MerchantsSettled';
	import ContactUs from '@/components/ContactUs';
	import Authority from '@/components/authorityPopup.vue'
	export default {
		onLoad: function(options) {
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/my/Login')
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//调用获取图片的方法
			this.getMineImgurl();
			this.getMineImgurlT();
			//获取用户登录信息的token  缓存  和基本信息
			this.getmember();
			this.GetOrderCount();
			this.getToken();//是否有token  有 则 显示头像  反之显示默认头像
			
		},
		onShow() {
			//登录缓存  是否登录过  注册过  memberLoginStatus = 1 没有登录 2 登录 或注了
			this.GetOrderCount();
			this.getmember();
			this.getToken();
		},
		data() {
			return {
				
				updatePopup: false,
				merchantsPopup: false,
				contactUsPopup: false,
				firstImgurl: '',
				twoImgurl: '',
				token: '',
			
				getmemberInfo:'',
				versionInfo:[],
				orderCount:'',
				count_unpay:false,
				count_unsend:false,
				count_sending:false,
				showAuthority:false,
				showLogout:false,
				version:'',
				appId:'wx91063cc93c2cffbf',
				memberLoginStatus:'1' ,//没有登录
				htoken:'',

			}
		},
		components: {
			Update,
			Merchants,
			ContactUs,
			Authority
		},
		methods: {
			//是否有token  有 则 显示头像  反之显示默认头像
			getToken(){
				let hashtoken = uni.getStorageSync("token")
				if(hashtoken != '' ){
					this.htoken = 1
				}
			},
		
			//获取用户缓存信息
			getmember() {
				var t=this;
				uni.getStorage({
					key: "member",
					success(e) {
						t.getmemberInfo = e.data;
						if(t.getmemberInfo.phone!=null&&t.getmemberInfo.phone!=''&&typeof(t.getmemberInfo.phone)!='undefind'&&t.getmemberInfo.phone!=0){
							t.token = 1
							t.showLogout = true
							t.htoken = 1
						}
						if(t.getmemberInfo.avatarUrl!=null&&t.getmemberInfo.avatarUrl!=''&&typeof(t.getmemberInfo.avatarUrl)!='undefind'){
							t.htoken = 1
						}
					},
					fail() {
						t.getmember();
					}
				})
			},
		
			toDownload(){
				
				uni.navigateTo({
					url:'/pages/download/download?url='+this.versionInfo.url+'&note='+this.versionInfo.note+'&version='+this.versionInfo.version+'&size='+this.versionInfo.size+'&update_time='+this.versionInfo.update_time
				})
			},
			toHistory() {
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/goods/BrowsingHistory'
					})
				}
				
			},
			toAccount() {
				uni.navigateTo({
					url: '/pages/my/AccountSettings'
				})
			}, 
			//获取订单数量
			GetOrderCount(){
				
				this.$api.GetOrderCount({
				}).then(res => {
					if (res.data.status == true) {
						this.orderCount = res.data.data

						if(this.orderCount.length!=0){
							this.count_unpay = res.data.data.count_unpay
							this.count_unsend = res.data.data.count_unsend
							this.count_sending = res.data.data.count_sending
						}

						if(this.count_unpay==null){
							count_unpay=false;
						}
						if(this.count_unsend==null){
							count_unsend=false;
						}
						if(this.count_sending==null){
							count_sending=false;
						}
					} 
				})
			},
			//我的页消费记录
			toConsume() {
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/ConsumeHistory'
					})
				}
			
			},
			//平台协议
			toAgreement() {
				uni.navigateTo({
					url: '/pages/my/Agreement'
				})
			},
			closeUpdatePopup() {
				this.updatePopup = false;
			},
			toMerchants() {

				this.merchantsPopup = !this.merchantsPopup;
				uni.navigateTo({
					url: 'pages/my/MerchantsSettled'
				})
			},
			closeMerchantsPopup() {
				this.merchantsPopup = false
			},
			//获取图片, 我的页广告1
			getMineImgurl() {
				this.$api.getAdvert({
					advert_type: 2
				}).then(res => {
					if (res.data.status == true) {
						this.firstImgurl = res.data.data.imgurl
					} else {
						uni.showToast({
							title: '暂无数据',

						})
					}

				})
			},
			//获取图片, 我的页广告2
			getMineImgurlT() {
				this.$api.getAdvert({
					advert_type: 3
				}).then(res => {
					if (res.data.status == true) {
						this.twoImgurl = res.data.data.imgurl
					}

				})
			},
			//联系客服 点击事件
			contactUs() {
				this.contactUsPopup = !this.contactUsPopup;

			},
			closeContactUsPopup() {
				this.contactUsPopup = false;
			},
			shareApp() {
				uni.navigateTo({
					url: '/pages/my/ShareApp'
				})
			},
			toPay(index) {
			
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/order/NotPay?status=' + index
					})
				}
				
			},
			//退出登录
			loginExit() {
				var t=this;
				t.token = ''
				t.htoken=''
				t.showLogout=false
				//用户缓存信息
				this.$api.getLogout({
				}).then(res => {
					if (res.data.status == true) {
						//清除用户手机号
						uni.removeStorage({
							key: "member",
						})
						//清除登录状态
						uni.removeStorage({
						 	key: "memberLoginStatus",
						})
						//清除token
						uni.removeStorage({
							key: "token",
							success: function(res) {
								uni.showToast({
									title: '退出登录成功',
								})
								setTimeout(function(){
										//跳转到首页
										uni.switchTab({
											url: '/pages/my/Login'
										})
									},1000)
								
							}
						})
					}
				
				})

			},
			//立即登录 
			//先调微信授权  授权成功 跳登录页
			//app第三方登录

			toLogin() {
				// 登录页
				uni.navigateTo({
					url: '/pages/login/Login'
				})

			},
			
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: (--status-bar-height));
		padding-bottom: 98rpx;
		/* padding-top: calc(var(--status-bar-height)); */
	}
	.status-bar{
		width: 100%;
		height: var(--status-bar-height);
		background-color: #FEB147;
		position: fixed;
		z-index: 10;
	}
	.top {
		position: relative;
		width: 750rpx;
		height: 376rpx;
		margin-top: -5rpx;
	}

	.login-top {
		width: 750rpx;
		height: 390rpx;
	}

	.user {
		position: absolute;
		left: 80rpx;
		top: 176rpx;
		width: 138rpx;
		height: 138rpx;
		border-radius: 100%;
	}

	.wechat-name {
		position: absolute;
		top: 206rpx;
		left: 277rpx;
		height: 38rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-decoration: underline;
	}

	.share-wrap {
		position: absolute;
		right: 23rpx;
		top: 268rpx;
		width: 153rpx;
		height: 56rpx;
	}

	.share {
		width: 153rpx;
		height: 56rpx;
	}

	.share-content {
		position: absolute;
		top: 5rpx;
		left: 22rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-top: -20rpx;
		width: 690rpx;
		height: 148rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 20rpx;
		margin-left: 30rpx;
	}

	.pay {
		width: 51rpx;
		height: 51rpx;
	}

	.pay-content {
		display: block;
		margin-top: 10rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	} 

	.number {
		position: absolute;
		top: -15rpx;
		right: -20rpx;
		width: 25rpx;
		height: 25rpx;
		background: rgba(255, 44, 44, 1);
		border: 1rpx solid rgba(255, 44, 44, 1);
		border-radius: 50%;
	}

	.number text {
		display: block;
		margin: 0 auto;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		line-height: 25rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.info-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.summer {
		width: 750rpx;
		height: 210rpx;
		margin-top: 30rpx;
	}

	.bottom {
		width: 750rpx;
		height: 476rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -3rpx 7rpx 0rpx rgba(177, 177, 177, 0.4), 0px 3px 7px 0px rgba(177, 177, 177, 0.4);
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.bottom view {
		border-bottom: 1rpx solid #eee;
	}

	.info-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		height: 79rpx;
		margin-left: 33rpx;
	}

	.info-wrap text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.info-wrap image {
		width: 14rpx;
		height: 26rpx;
	}

	.bar {
		width: 670rpx;
		height: 1rpx;
		background: rgba(204, 204, 204, 1);
		margin-left: 40rpx;
	}

	.luck {
		width: 750rpx;
		height: 216rpx;
		margin-top: 30rpx;
	}

	.logout {
		display: block;
		margin-top: 20rpx;
		position: relative;
		width: 750rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(177, 177, 177, 0.29);
	}

	.logout text {
		position: absolute;
		top: 15rpx;
		left: 309rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.network {
		display: block;
		width: 100%;
		text-align: center;
		
		margin-top: 60rpx;
		height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 50rpx;
	}
</style>
